<template>
  <n-drawer v-model:show="state.showFlag" :width="width" class="system-modal">
    <n-drawer-content :title="state.title" closable>
      <n-spin :show="state.loadingFlag">
        <n-form
          ref="formRef"
          :model="modelForm"
          label-placement="left"
          label-align="right"
          :label-width="100"
          :disabled="disabled"
          require-mark-placement="left"
        >
          <slot />
        </n-form>
      </n-spin>
      <template #footer>
        <n-flex :justify="justify">
          <n-button @click="onClose">取消</n-button>
          <n-button
            color="#0A56D8FF"
            :disabled="disabled"
            :loading="state.submitFlag"
            @click="onValidate"
          >
            确定
          </n-button>
        </n-flex>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>
<script setup lang="jsx">
defineOptions({ name: 'MyDrawer' })
const props = defineProps({
  modelForm: {
    type: Object,
    default: () => ({}),
  },
  width: {
    type: Number,
    default: 600,
  },
  justify: {
    type: String,
    default: 'center',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['submit'])
import { useFormPro } from '@/hooks/useFormPro'
const { state, setState, formRef, onClose, onValidate } = useFormPro(props, emits)
defineExpose({
  setState,
})
</script>
<style lang="scss" scoped></style>
